<template>
  <div>
    <v-btn
      v-if="type == 'btn'"
      @click="handleClick"
      class="rounded-lg"
      color="#0057FF"
      prepend-icon="mdi-plus"
    >
      上传文件
    </v-btn>
    <div v-else-if="type == 'card'" class="flex gap-3 flex-wrap">
      <v-img
        class="mx-auto"
        height="300"
        lazy-src="https://picsum.photos/id/11/100/60"
        max-width="500"
        src="https://bad.src/not/valid"
        v-for="item in fileList"
      >
        <template v-slot:placeholder>
          <div class="d-flex align-center justify-center fill-height">
            <v-progress-circular
              color="grey-lighten-4"
              indeterminate
            ></v-progress-circular>
          </div>
        </template>
      </v-img>
      <v-img
        class="mx-auto"
        height="300"
        lazy-src="https://picsum.photos/id/11/100/60"
        max-width="500"
        src="https://bad.src/not/valid"
      >
        <template v-slot:placeholder>
          <div class="d-flex align-center justify-center fill-height">
            <v-progress-circular
              color="grey-lighten-4"
              indeterminate
            ></v-progress-circular>
          </div>
        </template>
      </v-img>
    </div>
    <input
      ref="fileInputRef"
      @change="changeFile"
      hidden
      type="file"
      :multiple="multiple"
    />
  </div>
</template>

<script setup lang="ts">
import upload from '@/api/upload';
import { ref } from 'vue';

// 定义自定义类型
interface UploadProps {
  multiple: boolean;
  type: 'btn' | 'card';
}

// 使用自定义类型定义 props，并设置默认值
const { type = 'card', multiple = false } = defineProps<UploadProps>();

const fileInputRef = ref<HTMLInputElement | null>(null);
const fileList = ref<File[]>([]);

function handleClick() {
  fileInputRef.value?.click();
}

function changeFile(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files) {
    fileList.value = Array.from(target.files);
  }
}
</script>

<style scoped></style>
